<template>
	<view 
		class="jf-topic" 
		:class="{
			'placeholder': !data.topic,
			'focus': data.showKeyboard
		}" 
		@click="focus()">
		{{data.showKeyboard ? data.topic : data.topic || props.placeholder}}
	</view>
	<view class="jf-topic__keyboard" :style="{'--bottom': data.bottom + 'px'}" v-if="data.showKeyboard">
		<view class="jf-topic__keyboard-btns">
			<image src="@/static/images/index/add/icon004.png" @click.stop="addTopic()"></image>
			<view class="jf-topic__keyboard-submit" @click.stop="submit()">{{props.confrimText}}</view>
		</view>
	</view>
	<input type="text" v-model="data.topic" :focus="data.focus" class="jf-topic__input" @blur="inputBlur()" @input="input"/>
</template>

<script lang="ts" setup>
	import { nextTick, onMounted, reactive, watch } from 'vue';
	
	const props = withDefaults(defineProps<{
		disabled?: boolean
		placeholder?: string
		confrimText?: string
		modelValue?: string[]
		length?: number
	}>(),{
		disabled: false,
		placeholder: '',
		confrimText: '完成',
		modelValue: () => [],
		length: 100
	})
	const emits = defineEmits<{
		(e: 'update:modelValue', topics: string[])
		(e: 'change', topics: string[])
		(e: 'confirm', topics: string[])
		(e: 'search', topic: string)
	}>()
	const data = reactive({
		topics: [],
		topic: '',
		focus: false,
		showKeyboard: false,
		bottom: 0
	})
	
	const focus = ():void => {
		console.log("12345");
		if(props.disabled) return
		data.focus = true
		// data.showKeyboard = true
	}
	const inputBlur = ():void => {
		data.focus = false
		setTimeout(() => {
			if(!data.focus) data.showKeyboard = false
		},200)
	}
	const input = ( event:any ):void => {
		const topics = event.detail.value.split('#')
		topics.splice(0, 1)
		data.topics = topics
		emits('update:modelValue', data.topics)
		emits('change', data.topics)
		if(data.topics.length > 0){
			emits('search', data.topics[data.topics.length - 1])
		}
		joinText()
	}
	const addTopic = ():void => {
		data.focus = true
		if(data.topics.length === 0 || data.topics.length > 0 && data.topics.length < props.length && data.topics[data.topics.length - 1].length > 0){
			emits('update:modelValue', data.topics)
			emits('change', data.topics)
			data.topics.push("")
			joinText()
		}
	}
	const joinText = ():void => {
		let topic = ''
		for(let index in data.topics){
			data.topics[index] = data.topics[index].replace(/(^\s*)|(\s*$)/g, "")
			if(Number(index) === 0){
				topic += "#" + data.topics[index]
			}else{
				topic += " #" + data.topics[index]
			}
		}
		data.topic = topic
	}
	const submit = ():void => {
		const topics = []
		for(let index in data.topics){
			if(data.topics[index].length > 0)topics.push(data.topics[index])
		}
		emits('confirm', topics)
	}
	
	onMounted(() => {
		nextTick(() => {
			data.topics = props.modelValue
			if(data.topics.length === 0){
				addTopic()
			}else{
				joinText()
			}
			uni.onKeyboardHeightChange(res => {
				if(data.bottom > 0){
					data.bottom = res.height
					uni.offKeyboardHeightChange()
				}
			})
		})
	})
	watch(() => props.modelValue, (nVal:string[]):void => {
		data.topics = nVal
		joinText()
	},{
		deep: true
	})
</script>

<style lang="scss">
	.jf-topic{
		position: relative;
		width: 100%;
		min-height: 164rpx;
		padding: 32rpx;
		box-sizing: border-box;
		font-weight: 400;
		color: #2C5998;
		line-height: 32rpx;
		font-size: 28rpx;
		&.placeholder{
			color: #B2B9C6;
		}
		&.focus{
			&::after{
				position: absolute;
				content: "|";
				color: #2C5998;
				
			}
		}
	}
	.jf-topic__input{
		position: fixed;
		left: -100%;
		top: -100%;
	}
	.jf-topic__mask{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
	}
	.jf-topic__keyboard{
		position: fixed;
		z-index: 999;
		left: 0;
		bottom: 0;
		padding-bottom: var(--bottom);
		background: #ffffff;
		.jf-topic__keyboard-btns{
			position: relative;
			z-index: 999;
			@include layout();
			width: 100vw;
			height: 120rpx;
			box-shadow: 0 0 20rpx rgba(145,159,179,0.2);
			padding: 0 32rpx;
			box-sizing: border-box;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 32rpx;
			}
			.jf-topic__keyboard-submit{
				line-height: 64rpx;
				padding: 0 32rpx;
				border-radius: 32rpx;
				margin-left: auto;
				background: #326AFF;
				font-weight: 500;
				color: #FFFFFF;
				font-size: 28rpx;
			}
		}
	}
</style>
